<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <breadcrumb v-bind:paths="paths" :name="name" ></breadcrumb>
            </div>
        </div>
        <div class="row msg" >
            <div class="col" >
    <el-button-group>
      <el-button type="primary" @click="showdialo()" > 添加小节</el-button>
      <!-- <el-button type="primary" >小节重新排序</el-button> -->
    </el-button-group>
            </div>
        </div>
        <div class="row" v-loading="loading">
            <div class="col" style="min-height:400px;" v-if="datas">
                <div class="card mb-3 text-white">
                    <img class="card-img-top" :src="datas.Course.banner" alt="Card image cap">
                    <div class="card-img-overlay bg-0">
                        <div class="card-header">
                            <h3 class=" text-center" v-text="datas.Course.name"></h3>
                        </div>
                        <div class="card-body ">
                            <table class="table table-bordered">
                                <thead class="">
                                    <tr class="bg-x">
                                        <th colspan="2" scope="col">基本信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                ID:
                                            </span>
                                            <span v-text="datas.Course.ID"></span>
                                        </th>
                                        <td>
                                            <span>
                                                名称:
                                            </span>
                                            <span v-text="datas.Course.name"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                价格:
                                            </span>
                                            <span v-text="datas.Course.coursePrize"></span>
                                        </th>
                                        <td>
                                            <span>
                                                类型:
                                            </span>
                                            <span v-text="datas.Course.courseType"></span>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                硬件环境:
                                            </span>
                                            <span v-text="datas.Course.environment"></span>
                                        </th>
                                        <td>
                                            <span>
                                                难度:
                                            </span>
                                            <span v-text="datas.Course.difficulty"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                介绍:
                                            </span>
                                            <span v-text="datas.Course.info"></span>
                                        </th>
                                        <td>
                                            <span>
                                                简介:
                                            </span>
                                            <span v-text="datas.Course.introduction"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                level:
                                            </span>
                                            <span v-text="datas.Course.level"></span>
                                        </th>
                                        <td>
                                            <span>
                                                排序:
                                            </span>
                                            <span v-text="datas.Course.paixu"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <span>
                                                createTime:
                                            </span>
                                            <span v-text="getLocalTime(datas.Course.createTime)"></span>
                                        </th>
                                        <td>
                                            <span>
                                                updateTime:
                                            </span>
                                            <span v-text="getLocalTime(datas.Course.updateTime)"></span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="table-responsive-sm">
                                <table class="table table-bordered">
                                    <thead class="">
                                        <tr class="bg-x" >
                                            <th colspan="8" scope="col">课程小节</th>
                                        </tr>
                                        <tr>
                                            <th scope="row">
                                                #
                                            </th>
                                            <th scope="row">
                                                ID
                                            </th>
                                            <td>
                                                名称
                                            </td>
                                            <th scope="row">
                                                videoId
                                            </th>
                                            <td>
                                                CreateTime
                                            </td>
                                            <th scope="row">
                                                UpdateTime
                                            </th>
                                            <td>
                                                查看
                                            </td>
                                            <td>
                                                修改
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(v,i) in datas.Lession" :key="i">
                                            <th scope="row" v-text="v.num">
                                            </th>
                                            <td v-text="v.ID">
                                            </td>
                                            <th scope="row" v-text="v.name">
                                            </th>
                                            <th scope="row" v-text="v.videoId">
                                            </th>
                                            <td v-text="getLocalTime(v.lessionCreateTime)">
                                            </td>
                                            <th scope="row" v-text="getLocalTime(v.lessionUpdateTime)">
                                            </th>
                                            <td>
                                                <router-link :to="{ name: 'lessionByid', params:{lid: v.ID}, query:{name: datas.Course.name, id: datas.Course.ID} }" >查看</router-link> 
                                            </td>
                                            <td>
                                                修改
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <el-dialog title="添加小节" :visible.sync="dialogFormVisible">
                <addlession v-bind="{course: datas,dialog:dialog, start: start}" ></addlession>
                </el-dialog>
        </div>
    </div>
</template>

<script>
import { asyncgetCourseAndLessionsByCourseID } from "../../plugins/api.js";
import breadcrumb from "@/components/breadcrumb.vue";
import addlession from "./addlession.vue";
import { getLocalTime } from "../../plugins/utils.js";
export default {
  name: "coursebyid",
  data() {
    return {
      paths: [
        {
          name: "查看课程",
          path: "/watchcourse"
        }
      ],
      name: "",
      datas: {
        Course: {
          ID: 41,
          banner:
            "https://hterobot-image.oss-cn-beijing.aliyuncs.com/lessons-baner/hand.png",
          coursePrize: 0.01,
          courseTag: "基础课程,编程",
          courseType: "",
          createTime: {
            date: 24,
            day: 5,
            hours: 0,
            minutes: 0,
            month: 7,
            seconds: 0,
            time: 1535040000000,
            timezoneOffset: -480,
            year: 118
          },
          difficulty: 5,
          environment: "1234",
          info: "主要介绍六自由度灵巧手结构原理和各部分安装，了解连杆的使用等",
          introduction:
            "主要介绍六自由度灵巧手结构原理和各部分安装，了解连杆的使用等",
          level: "level 6",
          name: "14.智能灵巧手的安装",
          paixu: 14,
          updateTime: {
            date: 24,
            day: 5,
            hours: 0,
            minutes: 0,
            month: 7,
            seconds: 0,
            time: 1535040000000,
            timezoneOffset: -480,
            year: 118
          }
        },
        Lession: [
          {
            ID: 4,
            course_ID: 41,
            num: 1,
            videoId: "3c332842921c40fa8b13d81d3530ddec"
          },
          {
            ID: 5,
            course_ID: 41,
            num: 2,
            videoId: "890486f57a6043bf9517fef01b122f0e"
          },
          {
            ID: 6,
            course_ID: 41,
            num: 3,
            videoId: "bd0cc05a315e4caf97eab9060467f8e2"
          },
          {
            ID: 7,
            course_ID: 41,
            num: 4,
            videoId: "dc89df611e594691bdb962d1afd711e3"
          },
          {
            ID: 8,
            course_ID: 41,
            num: 5,
            videoId: "8a35b0ed45d44003ac9d677d7a49fecc"
          },
          {
            ID: 9,
            course_ID: 41,
            num: 6,
            videoId: "b075c560b30a40dd9b1e75cd01612c87"
          },
          {
            ID: 10,
            course_ID: 41,
            num: 7,
            videoId: "3de9cea10134427c83bb690317bc7b0b"
          },
          {
            ID: 11,
            course_ID: 41,
            num: 8,
            videoId: "2f3bdc5563c84c258b031d7f41ac7a49"
          },
          {
            ID: 12,
            course_ID: 41,
            num: 9,
            videoId: "a8f99dd3b5f341afb373274705f05616"
          }
        ]
      },
      loading: true,
      dialogFormVisible: false
    };
  },
  watch: {
    $toute() {
      this.start();
    }
  },
  mounted() {
    this.start();
  },
  methods: {
    async start() {
      this.loading = true;
      let id = this.$attrs.courseId;
      console.log(this.$attrs);
      this.datas = await asyncgetCourseAndLessionsByCourseID({
        cid: id
      });
      this.name = this.datas.Course.name
      this.loading = false;
    },
    dialog() {
      this.dialogFormVisible = false;
    },
    getLocalTime(time) {
      return getLocalTime(time);
    },
    showdialo() {
      this.dialogFormVisible = true;
    }
  },
  components: {
    breadcrumb,
    addlession
  }
};
</script>

<style scoped>
.bg-0 {
  background-color: rgba(0, 0, 0, 0.8);
  overflow-y: scroll;
}

.bg-x {
  background-color: rgba(221, 221, 221, 0.3);
}
</style>